<template>
    <div>
      <BHeader back>购物车</BHeader>
      <ul class="content">
        <li v-for="l in cardList">
          <img :src="l.bookCover" alt="">
          <button>-</button>{{l.bookCount}}<button>+</button>
          <p>小计 {{l.bookCount * l.bookPrice}}}</p>
          <button>删除</button>
        </li>
        <li>共{{count}}本</li>
      </ul>
    </div>
</template>

<script>
  import BHeader from '../base/BHeader';
  import {mapState,mapGetters} from 'vuex';
  console.log(mapState(['cardList']));
    export default {
        components:{
          BHeader
        },
        computed:{
          ...mapState(['cardList']),
          ...mapGetters(['count'])
          /*
          用语法糖
          cart(){
            return this.$store.state.cardList;
          }*/
        },
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .content{
    position: fixed;
    top: 40px;
    bottom: 52px;
    overflow: auto
  }
  .content ul{
    padding: 10px 0;
  }
  .content h4{
    font-size: 20px;
    line-height: 25px;
  }
  .content ul li{
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
  }
  .content ul li img{
    width: 130px;
    height: 150px;
  }
</style>
